<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"> </script> <title>
    Document
  </title>
</head>

<body>
  <!-- <img src="./bomp.jpg" id="box" alt="" srcset=""> -->
   <img alt="" id="box" src="" >
</body>
<script type="text/javascript">
  var imglizi = document.getElementById('box');
  console.log(imglizi, ' var imglizi ');
  var image = new Image();
  image.src = "./bomp.jpg"; //修改的地方 imgurl 就是你的图片路径           
  console.log(image)
  image.onload = function () {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    var ctx = canvas.getContext("2d");
    image.setAttribute("crossOrigin", 'Anonymous')
    ctx.drawImage(image, 0, 0, image.width, image.height);
    var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
    var base64 = canvas.toDataURL("image/" + ext);
    console.log(base64);
    imglizi.src = base64
    // console.log(imglizi);          
  }
</script>

</html>